var Event = {
    handle: {
        arr: [],
        res: [],
        maj: []
    },

    init: function() {
        var self = this;
        self.handle.res.forEach(function(resvalue, resindex) {
            self.handle.maj.forEach(function(majvalue, majindex) {
                if (resvalue === majvalue[0]) {
                    var arrIndex = self.handle.arr[resindex].match(/{{(.*?)}}/g);
                    self.ele.children[resindex].innerHTML = self.handle.arr[resindex].replace(arrIndex, majvalue[1]);
                }
            })
        })
    },

    emit: function(val, parent) {
        var self = this;
        self.handle.res.forEach(function(value, index) {
            if (value === parent) {
                var arrIndex = self.handle.arr[index].match(/{{(.*?)}}/g);
                self.ele.children[index].innerHTML = self.handle.arr[index].replace(arrIndex, val)
            }
        })
    },

    findnode: function(node) {
        var self = this;

        function done(node) {
            if (node.children.length != 0) {
                var childrenNodes = node.children;
                for (var index = 0; index < childrenNodes.length; index++) {
                    self.handle.arr.push(childrenNodes[index].innerHTML);
                    done(childrenNodes[index]);
                }
            }
        }
        done(node);
        return self.handle.arr;
    },

    done: function(ele) {
        var str = this.findnode(ele),
            self = this;
        str.forEach(function(k) {
            var result = k.match(/{{(.*?)}}/g);
            if (result) {
                result.forEach(function(val) {
                    self.handle.res.push('data.' + val.replace(/\{/g, '').replace(/\}/g, ''));
                })
            }
        })
    }

}

function Vue(data) {
    this.ele = document.getElementById(data.el);
    this.even(data.data);
    this.done(this.ele);
    this.init();
}

var p = Vue.prototype;

p.even = function(obj) {
    this.parent = Array.prototype.splice.call(arguments, 1)[0] || 'data';
    this.data = obj;
    this.walk(obj);
}

p.walk = function(obj) {
    var self = this,
        key,
        val;
    for (key in obj) {
        if (obj.hasOwnProperty(key)) {
            val = obj[key];
            if (typeof val === 'object') {
                this.even(val, this.parent + '.' + key)
            }
            this.conver(key, val, this.parent);

        }
    }
    this.parent = 'data';
}

p.conver = function(key, val, parent) {
    var keys = parent + '.' + key;
    var self = this;
    var array = [];
    array.push(keys, val);
    self.handle.maj.push(array);
    Object.defineProperty(this.data, key, {
        enumerable: true,
        configurable: true,
        get: function() {
            console.log('你访问了' + key);
            return val;
        },
        set: function(newval) {
            console.log('你设置了' + key + '新值为' + newval);
            self.emit(newval, keys);
            val = newval;
        }
    })
}

function instand(p, event) {
    var key;
    for (key in event) {
        p[key] = event[key]
    }
}
instand(p, Event)

let app = new Vue({
    el: 'app',
    data: {
        user: {
            name: 'denghouqiang',
            age: 25
        },
        school: 'bupt',
        major: 'computer'
    }
});